<template>
  <div>
    <div class="hover_box">
      <div class="top_box">
        <div class="span_box red"></div>
        <div class="span_box yellow"></div>
        <div class="span_box green"></div>
      </div>
      <div class="tip_text">
        Hover<br />
        Me
      </div>
      <h3> asdasdddddddddddddddddd<br />dddddddddddddddddddd<br />ddddddddd</h3>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
  .hover_box {
    width: 150px;
    height: 100px;
    margin-top: 50px;
    margin-left: 50px;
    overflow: hidden;
    color: white;
    background: rgb(198 198 198 / 34%);
    border-bottom: 3px solid rgb(255 255 255 / 44%);
    border-left: 2px rgb(255 255 255 / 54.5%) outset;
    border-radius: 8px;
    box-shadow: -40px 50px 30px rgb(0 0 0 / 28%);
    transform: skewX(10deg);
    backdrop-filter: blur(5px);
    transition: 0.4s;

    .top_box {
      display: flex;
    }

    .span_box {
      width: 10px;
      height: 10px;
      margin: 5px;
      border-radius: 50%;
    }

    .red {
      background-color: red;
    }

    .yellow {
      background-color: yellow;
    }

    .green {
      background-color: green;
    }

    .tip_text {
      width: 100%;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }
  }

  .hover_box:hover {
    height: 200px;
    transform: skewX(0);
    transition-duration: 0.3s;
  }
</style>
